<template>
    <view class="pages-new">
        <!-- 轮播图 -->
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(imageSrc, index) in imageSources" :key="index">
                    <view class="swiper-item">
                        <image :src="imageSrc"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!-- 分类按钮布局 -->
        <view class="categories">
            <view class="category-row">
                <view v-for="(category, index) in categories" :key="index" class="category-button" @click="selectCategory(index)" :class="{ 'selected': index === selectedCategory }">
                    {{ category }}
                </view>
            </view>
        </view>
        
        <!-- 商品列表 -->
        <swiper :current="selectedCategory" @change="slideOn" class="products-swiper">
            <swiper-item v-for="(category, index) in categories" :key="index">
                <scroll-view class="products-scroll" scroll-y>
                    <view class="products">
                        <view v-for="product in filteredProducts(category)" :key="product.id" class="product-card" @click="navigateToDetail(product)">
                            <image :src="product.url" class="product-image" mode="aspectFill" @error="imageError" @load="imageLoad(product.url)"></image>
                            <text class="product-name">{{ product.商品名 }}</text>
                            <text class="product-price">¥{{ product.价格 }}</text>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            categories: ['全部', '手机', '电脑', '食品', '男装', '生鲜', '家具厨具'],
            selectedCategory: 0,
            products: [],
            imageSources: [
                'https://gwk.oss-cn-beijing.aliyuncs.com/%E6%B0%B4%E6%9E%9C.png',
                'https://gwk.oss-cn-beijing.aliyuncs.com/%E8%80%B3%E6%9C%BA.jpg',
                'https://gwk.oss-cn-beijing.aliyuncs.com/%E4%BF%9D%E6%B9%BF%E5%93%81.jpg'
            ]
        };
    },
    created() {
        this.fetchProducts();
    },
    methods: {
        fetchProducts() {
            uni.request({
                url: 'http://123.57.75.79:3000/employees',
                method: 'GET',
                success: (response) => {
                    console.log('商品数据:', response.data);
                    this.products = response.data;
                },
                fail: (error) => {
                    console.error('获取数据失败:', error);
                }
            });
        },
        filteredProducts(category) {
            if (category === '全部') {
                return this.products;
            }
            return this.products.filter(product => product.类型 === category);
        },
        selectCategory(index) {
            this.selectedCategory = index;
        },
        slideOn(event) {
            this.selectedCategory = event.detail.current;
        },
        navigateToDetail(product) {
            wx.navigateTo({
                url: `/pages/productdetail/productdetail?id=${product.id}&name=${encodeURIComponent(product.商品名)}&description=${encodeURIComponent(product.商品详情)}&price=${product.价格}&url=${encodeURIComponent(product.url)}`
            });
        },
        imageError(event) {
            console.error('图片加载失败:', event);
        },
        imageLoad(url) {
            console.log('图片加载成功:', url);
        }
    }
};
</script>

<style scoped>
.pages-new {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.uni-margin-wrap {
    width: 100%;
}

.swiper {
    height: 160px;
}

.swiper-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    text-align: center;
}

.swiper-item image {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.categories {
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.category-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}

.category-button {
    flex: 1;
    text-align: center;
    font-weight: normal;
    padding: 3px 0px;
    margin: 3px 0;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.category-button.selected {
    font-weight: bold;
    color: #f00;
}

.products-swiper {
    flex: 1;
    width: 100%;
}

.products-scroll {
    height: 100%;
}

.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0;
}

.product-card {
    width: 33%;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.product-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.product-name {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}

.product-price {
    font-size: 18px;
    color: #f14048;
}
</style>
